<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- <link rel="stylesheet" type="text/css" href="css/new_file.css" /> -->
    <script type="text/javascript">
        var json = [
            {
                id: 1,
                name: '蔬菜',
                child: [{
                    id: '1',
                    name: '白菜'
                }, {
                    id: '2',
                    name: '萝卜'
                }, {
                    id: '3',
                    name: '菠菜'
                }]
            },
            {
                id: 2,
                name: '肉类',
                child: [{
                    id: '1',
                    name: '猪肉'
                }, {
                    id: '2',
                    name: '羊肉'
                }, {
                    id: '3',
                    name: '牛肉'
                }]
            },
            {
                id: 3,
                name: '蛋类',
                child: [{
                    id: '1',
                    name: '鸡蛋'
                }, {
                    id: '2',
                    name: '鹅蛋'
                }, {
                    id: '3',
                    name: '鸭蛋'
                }]
            }
        ];
        window.onload = function () {
            for (var i = 0; i < json.length; i++) {
                var obj = json[i];
                var objId = obj.id;
                var objname = obj.name;

                var optEle = document.createElement("option");
                optEle.innerText = objname;
                optEle.value = objId;

                document.getElementById("sel1").appendChild(optEle)
            }
            document.getElementById("sel1").onchange = function () {
                for (var i = 0; i < json.length; i++) {
                    if (this.value == "default") {
                        var secondSelectEle = document.getElementById("second_select");
                        if (secondSelectEle != null) {
                            document.getElementById("container").removeChild(secondSelectEle);
                        }
                    }
                    if (json[i].id == this.value) {
                        var childArr = json[i].child;
                        var secondSle = document.createElement("select");
                        secondSle.id = "second_select";

                        for (var k = 0; k < childArr.length; k++) {
                            var chilId = childArr[k].id;
                            var chilName = childArr[k].name;

                            var chilOptEle = document.createElement("option");
                            chilOptEle.innerText = chilName;
                            chilOptEle.value = chilId;

                            secondSle.appendChild(chilOptEle);
                        }

                        var secondSelectEle = document.getElementById("second_select");
                        if (secondSelectEle != null) {
                            document.getElementById("container").removeChild(secondSelectEle);
                        }
                        document.getElementById("container").append(secondSle);
                        break;
                    }
                }
            }

        }

    </script>
</head>

<body>
    <div id="container">
        <span>类别:</span>
        <select name="select1" id="sel1">
            <option value="default" id="selection1" selected="selected">----请选择-----</option>
        </select>
    </div>
</body>